<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="bootstrap.css">
</head>
<style>
	html {font-size: 62.5%;}
	.wrapper {
		width: 80%;
		max-width: 1140px;
		min-width: 320px;
		margin: 0 auto;
	}
</style>
<body>
<div class="wrapper">
	<h2>2016年最后两天<small>元旦来袭</small></h2>
	<p>超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！</p>	
	<p class="lead">超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！</p>
	<em>看看我 em 的样子</em></br>	
	<i>看看我 i 的样子</i>	</br>
	<b>看看我 b 的样子</b>	</br>
	<strong>看看我 strong 的样子</strong>	</br>
	<cite>看看我 cite 的样子</cite>
	<h4 class="text-primary">强调相关的类</h4>
	<div class="text-muted">【提示】</div>	
	<div class="text-primary">【主要】</div>	
	<div class="text-success">【成功】</div>	
	<div class="text-info">【通知信息】</div>	
	<div class="text-warning">【警告】</div>	
	<div class="text-danger">【危险】</div>	
	<p class="text-justify">There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. </p>
	<!--下面是任务部分-->
	<p class="text-right">给我加个类，我就向右对齐。</p>
	<p class="text-center">给我加个类，我就居中对齐。</p>
	<p class="text-legt">给我加个类，我就向做左对齐。</p>
	<dl>
		<dt>我是标题</dt>
		<dd>我是列表信息1</dd>
		<dd>我是列表信息2</dd>
	</dl>
	<ul class="list-inline">
		<li>W3Cplus</li>
		<li>Blog</li>
		<li>CSS3</li>
		<li>jQuery</li>
		<li>PHP</li>
	</ul>
	<dl class="dl-horizontal">
		<dt>标题1</dt>
		<dd>描述内容</dd>
		<dt>标题2</dt>
		<dd>描述内容</dd>
	</dl>
	<p class="text-primary">code风格：</p>
	Bootstrap的代码有三种风格：<code>&lt;code&gt;</code>、<code>&lt;pre&gt;</code>、<code>&lt;kbd&gt;</code>
	<p class="text-primary">pre风格：</p>
	<pre>
	&lt;ul&gt;
		&lt;li&gt;...&lt;/li&gt;
		&lt;li&gt;...&lt;/li&gt;
		&lt;li&gt;...&lt;/li&gt;
	&lt;/ul&gt;	
	</pre>
	<p class="text-primary">kbd风格：</p>
	<div>请输入<kbd>ctrk+c</kbd>来复制代码，然后使用<kbd>ctrl+v</kbd>来粘贴代码。</div>
	<pre class="pre-scrollable">
		<p class="text-right">给我加个类，我就向右对齐。</p>
		<p class="text-center">给我加个类，我就居中对齐。</p>
		<p class="text-legt">给我加个类，我就向做左对齐。</p>
		<dl>
			<dt>我是标题</dt>
			<dd>我是列表信息1</dd>
			<dd>我是列表信息2</dd>
		</dl>
		<ul class="list-inline">
			<li>W3Cplus</li>
			<li>Blog</li>
			<li>CSS3</li>
			<li>jQuery</li>
			<li>PHP</li>
		</ul>
		<dl class="dl-horizontal">
			<dt>标题1</dt>
			<dd>描述内容</dd>
			<dt>标题2</dt>
			<dd>描述内容</dd>
		</dl>
	</pre>
</div>
</body>
</html>